<template>
  <div class="qa-wrapper">
    <!-- <van-notify v-model:show="showNotice" @Click="handleRefresh">
      <van-icon name="bell" style="margin-right: 4px" />
      <span>{{ noticeMessage }}</span>
    </van-notify> -->
    <div class="wrapper-header">
      <div class="switch">
        <!-- 筛选项 -->
        <el-select v-model="selectedStatus" placeholder="筛选申请状态" @change="fetchRecords">
          <el-option v-for="status in statusOptions" :key="status.value" :label="status.label" :value="status.value" />
        </el-select>
      </div>
      <div class="search">
        <el-button @click="fetchRecords" type="primary" >查询</el-button>
      </div>
    </div>
    <div class="wrapper-list">
      <van-cell-group inset>
        <van-list v-model:loading="loading" :finished="!hasMore" finished-text="没有更多了" @load="handleMore">
          <van-cell v-for="item in applyRecords" :key="item.id" class="wrapper-cell" :class="{ highlight: true }">
            <template #title>
              <div class="card-content"></div>
              <div class="title">
                <div class="content">
                  <!-- 图片部分 -->
                  <img :src="logoImg" class="image" />
                  <!-- 文字和操作部分 -->
                  <div class="text-content">
                    <span style="color: darkorange; font-size: 20px; font-weight: bold">{{
                      item.limitAmount
                    }}</span> 
                    <div style="margin-top: 5px;">
                      <span style="font-weight: bold;"> {{item.weekNum}}期</span><el-tag :type="getStatusTag(item.status)" style="margin-left: 10px;">{{ getStatusLabel(item.status) }}</el-tag>
                    </div>
                    <div class="question">
                      <span style="font-weight: 400; font-size: 13px">联系人：</span
                      ><span style="color: gray">{{ item.name }}</span>
                      <span style="font-weight: 400; font-size: 13px; margin-left: 10px">联系电话：</span
                      ><span style="color: gray">{{ item.phone }} </span>
                      <span style="font-weight: 400; font-size: 13px; margin-left: 10px">微信：</span
                      ><span style="color: gray">{{ item.wechat }}</span>
                    </div>
                    
                  </div>
                </div>

                <div class="footer">
                  <div >
                    <template v-if="item.status === 'APPROVED' && !item.userCommit" >
                      <el-button type="primary" @click="confirmApply(item.id)">点击确认</el-button>
                    </template>
                    <template v-else-if="item.status === 'APPROVED' && item.userCommit">
                      <el-tag >已确认，等待放款</el-tag>
                      <br>
                      <span style="font-size: 11px;" v-if="item.userCommitDate">确认时间：
                        {{ formatTimestamp(item.userCommitDate) }}</span>
                    </template>
                  </div>
                  <div class="time">
                    申请时间：
                    {{ formatTimestamp(item.createdAt) }}
                  </div>
                </div>
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-cell-group>
    </div>
  </div>
</template>
<style scoped>
@import '../style/applyRecordList.less';
</style>
<script lang="ts" setup>
import * as Vue from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as httpService from '@/services/apply.service'
import { ApplyModule } from '@/services/modules/apply'
import { formatTimestamp } from '@/utils/helper'
import logoImg from '@/assets/images/scb.jpg'
const applyRecords = ref<ApplyModule.ApplyRecord[]>([])

const selectedStatus = ref('')

// 贷款状态选项
const statusOptions = [
  { label: '全部', value: '' },
  { label: '已提交，等待审核', value: 'SUBMITTED' },
  { label: '审核中', value: 'UNDER_REVIEW' },
  { label: '审核通过', value: 'APPROVED' },
  { label: '已放款', value: 'DISBURSED' },
  { label: '已还款', value: 'REPAID' },
  { label: '已关闭', value: 'CLOSED' },
]

const loading = Vue.ref(true)
const hasMore = Vue.ref(false)



// 获取状态文本
const getStatusLabel = (status: string) => {
  const option = statusOptions.find((s) => s.value === status)
  return option ? option.label : '未知'
}

// 获取状态颜色
const getStatusTag = (status: string) => {
  const statusMap = {
    SUBMITTED: '',
    UNDER_REVIEW: 'warning',
    APPROVED: 'success',
    DISBURSED: 'success',
    REPAID: 'success',
    CLOSED: 'danger',
  } as any
  return statusMap[status] || 'info'
}

// 加载更多
async function handleMore() {
  if (!hasMore.value) return
  await fetchRecords()
}

function handleChange(val: boolean) {
  applyRecords.value = []
  fetchRecords()
}

// 获取申请记录
const fetchRecords = async () => {
  loading.value = true
  try {
  const response = await httpService.getMyApplyRecords()
  applyRecords.value = response.data
  } finally {
    loading.value = false;
  }
}


const confirmApply = async (id: number | undefined) => {
  if (!id) return
  ElMessageBox.confirm('我已确认，请放款', '提示', {
    type: 'warning',
  })
    .then(async () => {
      try {
        await httpService.confirmApplyRecord({id:id})
        ElMessage.success('确认成功')
        fetchRecords()
      } catch (error) {
        ElMessage.error('确认失败，请稍后重试')
      }
    })
    .catch(() => {})
}

onMounted(() => {
  fetchRecords()
})
</script>
